<br>
<br>
<div class="content-wrap">
  <div class="small-12 columns text-center">
    
    <ul class="small-block-grid-2 medium-block-grid-4">
      <li>
        <!-- Animated Block -->
        <div class="block"></div><br>

        <!-- Trigger -->
        <span class="trigger-slide-in button">Slide In</span>
      </li>
      <li>
        <!-- Animated Block -->
        <div class="block"></div><br>

        <!-- Trigger -->
        <span class="trigger-slide-out button">Slide Out</span>
      </li>
      <li>
        <!-- Animated Block -->
        <div class="block"></div><br>

        <!-- Trigger -->
        <span class="trigger-flip-in button">Flip In</span>
      </li>
      <li>
        <!-- Animated Block -->
        <div class="block"></div><br>

        <!-- Trigger -->
        <span class="trigger-flip-out button">Flip Out</span>
      </li>
      <li>
        <!-- Animated Block -->
        <div class="block"></div><br>

        <!-- Trigger -->
        <span class="trigger-hinge-in button">Hinge In</span>
      </li>
      <li>
        <!-- Animated Block -->
        <div class="block"></div><br>

        <!-- Trigger -->
        <span class="trigger-hinge-out button">Hinge Out</span>
      </li>
      <li>
        <!-- Animated Block -->
        <div class="block"></div><br>

        <!-- Trigger -->
        <span class="trigger-fade-in button">Fade In</span>
      </li>
      <li>
        <!-- Animated Block -->
        <div class="block"></div><br>

        <!-- Trigger -->
        <span class="trigger-fade-out button">Fade Out</span>
      </li>
      <li>
        <!-- Animated Block -->
        <div class="block"></div><br>

        <!-- Trigger -->
        <span class="trigger-scale-in button">Scale In</span>
      </li>
      <li>
        <!-- Animated Block -->
        <div class="block"></div><br>

        <!-- Trigger -->
        <span class="trigger-scale-out button">Scale Out</span>
      </li>
    </ul>
    

    


  </div>
</div>